<template>
    <div class="login">
      <img class="bg" src="../../public/login-bg.jpg" alt="">  
      <el-card class="box-card">
        <h1>登录</h1>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleFormRef"
          label-position="top"
          label-width="70px"
          class="login-from"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btnGroup">
          <el-button type="primary" size="large" @click="submitForm(ruleFormRef)" v-loading="loading"
            >登录</el-button
          >
          <router-link to="/register">
            <el-button class="regist" size="large">注册</el-button>
          </router-link>
          <el-button size="large" @click="resetForm(ruleFormRef)">重置</el-button>
        </div>
      </el-card>
    </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance } from 'element-plus'
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  const store = useUserStore()
  // 获取当前登录状态及用户角色
  const { isLogin } = storeToRefs(store);
  const { Login } = store;
  const ruleFormRef = ref<FormInstance>()
  const loading = ref(false)

  const ruleForm = reactive({
    username: '',
    password: '',
  })

  // 校验规则
  const rules = reactive({
    username: [{ required: true, message: "用户名不能为空！", trigger: "blur" }],
    password: [{ required: true, message: '密码不得为空', trigger: 'blur' },]
  })

  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (valid) {
        // 点击登录后，让登录按钮开始转圈圈（展示加载动画）
        loading.value = true;
        Login(ruleForm);
        if(isLogin){
          router.push({path:'/'});
        }
      } else {
        return false
      }
      loading.value = false;
    })
  }

  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
</script>
  
<style scoped>
  .login{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .bg{
      width: 100%;
      height: 100%;
    }
  }
  .box-card {
    background-color: transparent;
    position: absolute;
    top: 0;left: 0;right: 100px;bottom: 400px;margin: auto;
    width: 600px;
    height: 330px;
    h1{
      margin-bottom: 15px;
    }
  }
  .login-from {
    margin: auto auto;
    font-size: 18px;
  }
  ::v-deep .el-form-item__label{
    font-size: 20px;
  }
  ::v-deep .el-input__wrapper{
    height: 40px;
  }
  ::v-deep .el-input__inner,::v-deep .el-button--large{
    font-size: 18px;
  }
  .btnGroup{
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    .regist{
      margin: 0 20px;
    }
  }
</style>